<template>
    <el-dialog title="章次配置" :visible.sync="visible" width="560px" append-to-body :close-on-click-modal="false">
        <div style="margin-bottom: 12px;">请选择本工程使用的章次：</div>
        <BaseTable ref="table" v-loading="loading" :data="list" row-key="id" :columns="columns" highlight-current-row max-height="400px" @selection-change="handleSelectionChange"></BaseTable>
        <div slot="footer" class="dialog-footer">
            <BaseButton type="recond" @click="cancel">取消</BaseButton>
            <BaseButton :loading="submitLoading" @click="submitForm">确认</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import { ProjectLedgerModel } from '@/models'

export default {
    name: 'ChapterSetting',
    data() {
        return {
            model: new ProjectLedgerModel(),
            visible: false,
            submitLoading: false,
            loading: false,
            list: [],
            selectedList: [],
            columns: [
                {
                    attrs: {
                        type: 'selection',
                        width: '70',
                        selectable: (row) => {
                            return row.disabled !== true
                        },
                    }
                },
                {
                    attrs: {
                        label: '章次',
                        prop: 'listSubitemCode',
                        'show-overflow-tooltip': true,
                        width: '160'
                    }
                },
                {
                    attrs: {
                        label: '科目名称',
                        prop: 'listSubitemName',
                        'show-overflow-tooltip': true
                    }
                },
            ],
            id: ''
        }
    },
    created() {
        this.getList()
        this.id = this.$route.query.id
    },
    methods: {
        handleSelectionChange(val) {
            this.selectedList = val.map(item => {
                return {
                    projectId: this.id,
                    listSubitemCode: item.listSubitemCode,
                    listSubitemName: item.listSubitemName,
                    msType: 2
                }
            })
        },
        getList() {
            this.loading = true
            this.model
                .chapterList()
                .then(res => {
                    this.list = res || []
                })
                .finally(() => {
                    this.loading = false
                })
        },
        // 取消按钮
        cancel() {
            this.visible = false
        },
        open(codes = []) {
            this.visible = true
            // 回填选中的项
            this.$nextTick(() => {
                const refTable = this.$refs['table'].$refs['table']
                refTable.clearSelection()
                console.log('ids....', codes)
                codes.forEach((code) => {
                    this.list.some((item) => {
                        if (item.listSubitemCode === code) {
                            item.disabled = true
                            return true
                        }
                    })
                })
                console.log(this.list)
            })
            // this.$refs['form'].resetFields()
        },
        submitForm() {
            this.submitLoading = true
            console.log(this.selectedList)
            this.model
                .chapterAdd(this.selectedList)
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '操作成功！',
                        duration: 1000,
                        onClose: () => {
                            setTimeout(() => {
                                this.visible = false
                                this.submitLoading = false
                            }, 500)
                            this.$emit('success')
                        }
                    })
                })
                .catch(() => {
                    this.submitLoading = false
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.w-300 {
    width: 300px;
}
</style>
